<template>
	<div class="wode">
			<div class="back_red1"></div>
		<div class="aa">
			<div class="wode_title">
				<div class="head_image" @click="head">
					<img src="@/assets/shouye/tx.png" alt="">
				</div>
				<div class="bianji" @click="head">
					<span>编辑</span>
				</div>
				<div class="denglu" v-if="details.nickName==''">{{details.openId}}</div>
				<div class="denglu" v-if="details.nickName!=''">{{details.nickName}}</div>
			</div>
			<div class="jilu">
				<div @click="gorecord">
					<div>
						<p>购买记录</p>
					</div>
				</div>
				<div @click="godiscounts">
					<div>
						<p>优惠券</p>
					</div>
				</div>
			</div>
		</div>
		
		<ul class="liebiao">
			<van-cell icon="location-o" is-link title="帮助中心" />
			<van-cell icon="location-o" is-link title="意见反馈" />
			<van-cell icon="location-o" is-link title="关于我们" />
		</ul>
		
	</div>
</template>
<script>
	import {
		Toast
	} from 'vant';
	import { Uploader } from 'vant';
	export default {
		data() {
			return {
				show: false,
				details:[]
			};
		},
		mounted() {
			this.xinxi()
		},
		methods: {
			head() {
				this.$router.push('amend')
			},
			gorecord(){
				this.$router.push('record')
			},
			godiscounts(){
				this.$router.push('discounts')
			},
			xinxi(){
				this.$axios.get('http://a.chuxingcai.com/prod-api/webapi/user/detail',{
					headers:{
					  token:window.sessionStorage.getItem('token')
					}
				}).then((res) => {
					console.log(res.data.data)
					this.details=res.data.data
				})
			}
		},
	};
</script>

<style scoped>
	.wode {
		width: 100%;
		height: 500px;
		position: relative;
		overflow: hidden;
	}

	.content {
		padding: 16px 16px 160px;
	}

	.wode_title {
		width: 100%;
		height: 100px;
		/* background-color: white; */
		position: relative;
		z-index: 3;
	}

	.head_image {
		width: 70px;
		height: 70px;
		background-color: white;
		position: absolute;
		top: 20px;
		left: 20px;
		border-radius: 50%;
		overflow: hidden;
	}

	.head_image>img {
		width: 100%;
		height: 100%;
	}

	.denglu {
		position: absolute;
		top: 40px;
		left: 100px;
		color: white;
	}

	.jilu {
		width: 93%;
		height: 100px;
		border-radius: 10px;
		background-color: white;
		margin: 0 auto;
		display: flex;
	}
	.jilu>div{
		flex: 1;
		position: relative;
	}
.jilu>div>div{
	text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.liebiao {
		width: 93%;
		border-radius: 10px;
		overflow: hidden;
		margin: 20px auto;
	}

	.liebiao>li {
		width: 100%;
		height: 50px;
		list-style: none;
		background-color: white;
		border: 1px solid red;
		/* margin-top: 10px; */
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
	.back_red1{
		position: absolute;
		width: 180%;
		height: 300px;
		left: 50%;
		top: -130px;
		transform: translate(-50%,0);
		background-color: #F74A4B;
		border-radius: 50%;
	}
	.aa{
		position: relative;
		font-size: 3;
	}
	.bianji{
		width: 50px;
		height: 20px;
		background-color: rgb(255, 255, 255, 0.5);
		border-radius: 20px;
		text-align: center;
		line-height: 20px;
		font-size: 14px;
		color: #F74A4B;
		position: absolute;
		right: -7px;
		top: 30px;
	}
</style>
